<!DOCTYPE html>
<html>

<head>
    <title>音乐</title>

    <%- include bootstrap %>
</head>

<body>
    <%- include("header",{title:"music"}) %>

    <div class="container container-fluid">
        <div class="row">
            <div class="col-sm-10 col-xs-10 col-sm-offset-1 col-xs-offset-1 cl banner">
                <div class="cl">
                    <a href="/details?db_name=music&_id=<%- result[0]._id %>" class="col-sm-12 col-xs-12 banner_a">
                        <img class="banner_img" src="<%- result[0].imgsrc %>" alt="">
                        <h3 class="focus-title">
                            <%- result[0].title %>
                        </h3>
                    </a>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 50px;">
            <ul class="list-group col-sm-10 col-xs-10 col-sm-offset-1 col-xs-offset-1 newsList">
                <% result.map((item,index)=>{ %>
                <% if(index !==0 ){ %>
                <li class="list-group-item list-group-item-warning cl">
                    <a href="/details?db_name=music&_id=<%- item._id %>" style="cursor: pointer;">
                        <div class="col-sm-7 col-xs-7">
                            <h3 class="h1" style="line-height: 50px;color:#333333;">
                                <%- item.title %>
                            </h3>
                            <div>
                                <span>
                                    <%- item.ptime %>
                                </span>
                                <a style="margin-left: 15px;" href="/comments/comments?db_name=music&_id=<%- item._id %>">跟帖</a>
                            </div>
                        </div>
                        <div class="col-sm-5 col-xs-5">
                            <img src="<%- item.imgsrc %>" alt="" style="width: 100%;">
                        </div>
                    </a>
                </li>
                <% } %>
                <% }); %>
            </ul>
        </div>
        <div class="row">
            <div class="tip text-danger h3 bg-danger col-sm-10 col-xs-10 col-sm-offset-1 col-xs-offset-1" style="display: none;text-align: center;padding: 10px 0;">
                正在加载中。。。
            </div>
        </div>
    </div>
    <%- include("footer") %>
</body>

<script>
    var skip_key = 0;
    $(window).on("scroll", scrollHolder);
    function scrollHolder() {
        if ($(document.documentElement).scrollTop() === ($(document.documentElement).prop("scrollHeight") - $(document.documentElement).prop("clientHeight"))) {
            skip_key++;
            $.ajax({
                type: "get",
                url: "/index",
                data: {
                    skip_key: skip_key * 10,
                    db_name: "music"
                },
                dataType: "json",
                success: function (data) {
                    if (data.length === 0) {
                        $(".tip").html("没有了。。。");
                        $(".tip").show();
                        return;
                    }
                    $(".tip").show();
                    var html = "";
                    data.map((item) => {
                        html += `
            <li class="list-group-item list-group-item-warning cl">
              <a href="/details?db_name=music&_id=${item._id}" style="cursor: pointer;">
                <div class="col-sm-7 col-xs-7">
                  <h3 class="h1" style="line-height: 50px;color:#333333;">
                    ${item.title}
              </h3>
                  <div>
                    <span>
                     ${item.ptime}
                </span>
                    <a style="margin-left: 15px;" href="/comments/comments?db_name=music&_id=${item._id}">跟帖</a>
                  </div>
                </div>
                <div class="col-sm-5 col-xs-5">
                  <img src="${item.imgsrc}" alt="" style="width: 100%;">
            </div>
          </a>
        </li>
            `;
                    });
                    $(".newsList").append(html);
                    $(".tip").hide();
                }
            });
        }
    }


</script>

</html>